<template>
	<view class="template-order">
		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar fixed alpha customBack>
     <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
          <view class="login__mode__item " :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
            我买到
          </view>
          <view class="login__mode__item " :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
            我卖出
          </view>
        </view>
        
        
      </view>
    </tn-nav-bar> -->

		<view class="order--wrap" :style="{ top: vuex_custom_bar_height + 'px' }">
			<!-- 顶部标签 -->

			<view class="tn-bg-white">
				<tn-tabs-swiper class="order__tabs" ref="tabs" itemWidth="220" activeColor="#3165CC"
					inactiveColor="#080808" :list="list" :current="tabsIndex" :isScroll="true"
					@change="tabsChange"></tn-tabs-swiper>
			</view>
			<!-- 标签内容 -->
			<swiper class="order__swiper" :style="{ top: `${swiperTop}px`, height: `${swiperHeight}px` }"
				:current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
				<swiper-item class="order__swiper__item">
					<scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
						<view v-for="(item, index) in orderList" :key="index" class="order__item"
							@click="tn('/discoveryPages/form')">
							<view
								class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="order__item__head__title">订单编号：{{ item.id }}</view>
							</view>

							<view
								class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view
									class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center">
									<image src="/static/zhuyi.png" mode="aspectFill" class="tn-margin-right"></image>
									<view class="order__item__content__title">
										{{ item.name }}
									</view>
								</view>
								<view
									class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<view class="order__item__content__info__price">
										<text class="order__item__content__info__price--unit">￥</text>
										<text
											class="order__item__content__info__price__value--integer">{{ item.price }}</text>
										<!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
									</view>
									<!-- <view class="order__item__content__info__count">
										<text>共1件</text>
									</view> -->
								</view>
							</view>

							<view
								class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="order__item__operaation__left">
									<text class="order__item__operaation__left--text">更多</text>
								</view>
								<view
									class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
									<view class="order__item__operation__right__button">
										<tn-button shadow shape="round" fontColor="tn-color-white"
											backgroundColor="tn-bg-blue" :fontSize="24" height="auto"
											padding="10rpx 18rpx">详情</tn-button>
									</view>
								</view>
							</view>
						</view>
						<view class="tn-padding-bottom"></view>
					</scroll-view>
				</swiper-item>


				<!-- 待接单 -->
				<swiper-item class="order__swiper__item">
					<scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
						<view v-for="(item, index) in orderList" :key="index" class="order__item"
							v-if="item.status == 2">
							<view
								class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="order__item__head__title">订单编号：{{ item.id }}</view>
								<!-- <tn-tag shape="radius" backgroundColor="#ff7c10" fontColor="#ffffff"
									width="180">{{item.statustype}}</tn-tag> -->
							</view>

							<view @click="tn('/pages/order/orderDetail/orderDetail?type=1')"
								class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view
									class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center">
									<image src="/static/zhuyi.png" mode="aspectFill" class="tn-margin-right">
									</image>
									<view class="order__item__content__title">
										{{ item.name }}
									</view>
								</view>
								<view
									class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<view class="order__item__content__info__price">
										<text class="order__item__content__info__price--unit">￥</text>
										<text class="order__item__content__info__price__value--integer">
											{{ item.price }}</text>
										<!-- <text
                      class="order__item__content__info__price__value--decimal"
                      >.00</text
                    > -->
									</view>
									<!-- <view class="order__item__content__info__count">
                    <text>共3件</text>
                  </view> -->
								</view>
							</view>

							<view
								class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="order__item__operaation__left">
									<text class="order__item__operaation__left--text">更多</text>
								</view>
								<view
									class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
									<view class="order__item__operation__right__button">
										<tn-button shadow shape="round" fontColor="tn-color-white"
											backgroundColor="tn-bg-cyan" :fontSize="24" height="auto"
											padding="10rpx 18rpx" @click="openQrcode()"></text>去分配</tn-button>
									</view>
								</view>
							</view>
						</view>

						<view class="tn-padding-bottom"></view>
					</scroll-view>
				</swiper-item>

				<!-- 已接单 -->
				<swiper-item class="order__swiper__item">
					<scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
						<view v-for="(item, index) in orderList" :key="index" class="order__item"
							@click="tn('/pages/manager/orderList/orderDetail?type=1')" v-if="item.status == 3">
							<view
								class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="order__item__head__title">订单编号：{{ item.id }}</view>
							</view>

							<view
								class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view
									class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
									<view
										class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center">
										<image src="/static/zhuyi.png" mode="aspectFill" class="tn-margin-right">
										</image>
										<view class="order__item__content__title">
											{{ item.name }}
										</view>
									</view>
								</view>
								<view
									class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<view class="order__item__content__info__price">
										<text class="order__item__content__info__price--unit">￥</text>
										<text
											class="order__item__content__info__price__value--integer">{{ item.price }}</text>
										<!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
									</view>
									<!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
								</view>
							</view>

							<view
								class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="order__item__operaation__left">
									<text class="order__item__operaation__left--text">更多</text>
								</view>
								<view
									class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
									<view class="order__item__operation__right__button">
										<tn-button shadow shape="round" fontColor="tn-color-white"
											backgroundColor="tn-bg-blue" :fontSize="24" height="auto"
											padding="10rpx 18rpx">查看</tn-button>
									</view>
								</view>
							</view>
						</view>

						<view class="tn-padding-bottom"></view>
					</scroll-view>
				</swiper-item>

				<!-- 待验收 -->
				<swiper-item class="order__swiper__item">
					<scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
						<view v-for="(item, index) in orderList" :key="index" class="order__item"
							@click="tn('/pages/manager/orderList/orderDetail?type=1')" v-if="item.status == 5">
							<view
								class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
								<view class="order__item__head__title">订单编号：{{ item.id }}</view>
							</view>

							<view
								class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view
									class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
									<view
										class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center">
										<image src="/static/zhuyi.png" mode="aspectFill" class="tn-margin-right">
										</image>
										<view class="order__item__content__title">
											{{ item.name }}
										</view>
									</view>
								</view>
								<view
									class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<view class="order__item__content__info__price">
										<text class="order__item__content__info__price--unit">￥</text>
										<text
											class="order__item__content__info__price__value--integer">{{ item.price }}</text>
										<!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
									</view>
									<!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
								</view>
							</view>

							<view
								class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
								<view class="order__item__operaation__left">
									<text class="order__item__operaation__left--text">更多</text>
								</view>
								<view
									class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
									<view class="order__item__operation__right__button">
										<tn-button shadow shape="round" fontColor="tn-color-white"
											backgroundColor="tn-bg-blue" :fontSize="24" height="auto"
											padding="10rpx 18rpx">确认验收</tn-button>
									</view>
								</view>
							</view>
						</view>

						<view class="tn-padding-bottom"></view>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>

		<view class="order--wrap" :style="{ top: vuex_custom_bar_height + 'px' }" v-if="orderList.length === 0">
			<!-- 顶部标签 -->
			<view class="tn-bg-white">
				<tn-tabs-swiper class="order__tabs" ref="tabs" activeColor="#3165CC" inactiveColor="#080808"
					:list="list" :current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
			</view>

			<view class="" style="padding: 30vh 20rpx">
				<view class="tn-text-center" style="font-size: 200rpx; padding-top: 30rpx">
					<text class="tn-icon-wea-wind tn-color-gray--light"></text>
				</view>
				<view class="tn-color-gray tn-text-center tn-text-lg">空空如也，<span
						class="tn-color-blue tn-text-center tn-text-lg" @click="tn('/pages/apply/apply')">去申请</span>
				</view>
			</view>
		</view>
		<tn-modal v-model="codeShow" :custom="true">
			<view class="custom-modal-content">
				<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }">
				</uqrcode>
			</view>
		</tn-modal>
	</view>
</template>

<script>
	import templatePageMixin from "@/libs/mixin/template_page_mixin.js";

	export default {
		name: "TemplateOrder",
		mixins: [templatePageMixin],
		data() {
			return {
				// 当前选中的模式
				currentModeIndex: 0,
				orderList: [{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 1,
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 1,
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 2,
						statustype: "待能力评估",
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 2,
						statustype: "待环境评估",
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 3,
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 4,
					},
					{
						id: "SF009098765798",
						name: "浴室地板改造方案",
						price: "1000.00",
						status: 5,
					},
				],
				list: [{
						name: "全部",
					},
					{
						name: "待接单",
						count: 10,
					},
					{
						name: "已接单",
					},
					{
						name: "待验收",
					},
				],
				tabsIndex: 0,
				swiperIndex: 0,
				swiperTop: 0,
				swiperHeight: 0,
				codeShow: false,
			};
		},
		// onReady() {
		// 	this.$nextTick(() => {
		// 		this.updateSwiperInfo()
		// 	})
		// },
		created() {
			console.log("11111");
			this.$nextTick(() => {
				this.updateSwiperInfo();
			});
		},

		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 计算可滑动区域的高度信息
			updateSwiperInfo() {
				// 获取可滑动菜单的信息
				this._tGetRect(".order__tabs").then((res) => {
					if (!res) {
						setTimeout(() => {
							this.updateSwiperInfo();
						}, 10);
						return;
					}
					const systemInfo = uni.getSystemInfoSync();
					this.swiperTop = res.bottom - this.vuex_custom_bar_height;
					this.swiperHeight =
						systemInfo.safeArea.height -
						res.bottom +
						systemInfo.statusBarHeight -
						this.swiperTop;
				});
			},
			// 标签栏值发生改变
			tabsChange(index) {
				this.swiperIndex = index;
				// console.log(index, this.swiperIndex, this.tabsIndex);
			},
			// swiper-item位置发生改变
			swiperTransition(event) {
				this.$refs.tabs.setDx(event.detail.dx);
			},
			// swiper动画结束
			swiperAnimationFinish(event) {
				const current = event.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperIndex = current;
				this.tabsIndex = current;
			},
			openQrcode() {
				this.codeShow = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.template-order {
		background-color: #ffffff;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #ffffff;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 内容 start */
		&__wrapper {
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 326rpx;
			height: 60rpx;
			margin-top: 16rpx;
			border: 1rpx solid #e6e6e6;
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #aaaaaa;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #000000;
				}
			}
		}

		/* 切换 end */
	}

	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* 导航栏 end */

		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			// padding: 0 16rpx;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 36rpx 26rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);

			&:first-child {
				margin-top: 40rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			/* 头部 start */
			&__head {
				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #aaaaaa;
				}
			}

			/* 头部 end */

			/* 内容 start */
			&__content {
				margin-top: 20rpx;

				&__image {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}

				&__title {
					padding-right: 40rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&__info {
					&__price {
						&--unit {
							font-size: 20rpx;
						}

						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}

						&__value--decimal {
							font-size: 20rpx;
						}
					}

					&__count {
						color: #aaaaaa;
						font-size: 24rpx;
					}
				}
			}

			/* 内容 end */

			/* 操作按钮 start */
			&__operation {
				margin-top: 30rpx;

				&__right {
					&__button {
						margin-left: 10rpx;
					}
				}
			}

			/* 操作按钮 end */
		}

		/* 订单内容 end */
	}

	/* 二维码弹窗 */
	.custom-modal-content {
		display: flex;
		justify-content: center;
	}
</style>